<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="box" class="one two three" title="hello" asd="asd" data-id="100" data-index="0">
        <span>123123</span>
    </div>
</body>
<script>
    var box = document.getElementById("box");

    // 元素节点的属性: 
    // 1. 元素节点是一个对象
    // 2. 对象存在描述该对象的属性和方法  box.innerText  box.getAttribute()  box.onclick

    // console.log(box);
    // console.dir(box);

    // 获取非行内样式(内部 外部 默认 内联)

    // 常规浏览器
    // window.getComputedStyle(ele)  方法接收一个元素,返回该元素所有css样式形成对象

    // console.log(box.style);  // 内联样式形成的对象
    // console.log(window.getComputedStyle(box));  // 非行内样式形成的对象

    // console.log(window.getComputedStyle(box).width);
    // console.log(window.getComputedStyle(box)["height"]);
    // console.log(window.getComputedStyle(box)["backgroundColor"]);


    // IE地板版(IE8以及以下)   没有window.getComputedStyle方法  => 直接调用会报错
    // console.log(window.getComputedStyle);

    // IE的写法  Element.currentStyle   非行内样式形成的对象

    // console.log(box.currentStyle);
    // console.log(box.currentStyle.width);
    // console.log(box.currentStyle["height"]);
    // console.log(box.currentStyle["backgroundColor"]);


    // 常规浏览器 和 IE的写法不一样 => 兼容

    // if (window.getComputedStyle) {  //常规浏览器 有该方法 => true
    //     console.log(window.getComputedStyle(box).width);
    //     console.log(window.getComputedStyle(box)["height"]);
    //     console.log(window.getComputedStyle(box)["backgroundColor"]);
    // } else {
    //     console.log(box.currentStyle.width);
    //     console.log(box.currentStyle["height"]);
    //     console.log(box.currentStyle["backgroundColor"]);
    // }

    // ele 需要获取样式的元素
    // attr 获取的css属性的属性名
    function getStyle(ele, attr) {
        if (window.getComputedStyle) {  //常规浏览器 有该方法 => true
            // {"width":"100px",height:"100px"}
            return window.getComputedStyle(ele)[attr];
        } else {
            return ele.currentStyle[attr];
        }
    }

    console.log(parseInt(getStyle(box, "width")));;
    console.log(parseInt(getStyle(box, "height")));;
    console.log(getStyle(box, "backgroundColor"));;










</script>

</html>